<template>
	<view class="my-userinfo">
		<view class="user-box">
			<image :src="userinfo.avatarUrl"></image>
			<text>{{ userinfo.nickname }}</text>
		</view>
		<view class="panel-list">
			<view class="list1 common-style">
				<view class="list1-item child-common" v-for="(item, i) in firList" :key="i">
					<text>{{item.num}}</text>
					<text>{{item.name}}</text>
				</view>
			</view>
			<view class="list2 common-style">
				<view>我的订单</view>
				<view class="list2-box">
					<view class="list2-item child-common" v-for="(item, i) in secList" :key="i">
						<image :src="item.picUrl"></image>
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
			<view class="list3" v-for="(item, i) in thirdList" :key="i" @click="logout(i)">
				<text>{{item.name}}</text>
				<uni-icons type="right"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	export default {
		name:"my-userinfo",
		data() {
			return {
				firList: [
					{
						num: 8,
						name: '收藏的店铺'
					},
					{
						num: 14,
						name: '收藏的商品'
					},
					{
						num: 18,
						name: '关注的商品'
					},
					{
						num: 84,
						name: '足迹'
					}
				],
				secList: [
					{
						picUrl: '/static/my-icons/icon1.png',
						name: '待付款'
					},
					{
						picUrl: '/static/my-icons/icon2.png',
						name: '待收货'
					},
					{
						picUrl: '/static/my-icons/icon3.png',
						name: '退款/退货'
					},
					{
						picUrl: '/static/my-icons/icon4.png',
						name: '全部订单'
					}
				],
				thirdList: [
					{
						name: '收货地址'
					},
					{
						name: '联系客服'
					},
					{
						name: '退出登录'
					}
				]
			};
		},
		computed: {
			...mapState('m_user', ['userinfo'])
		},
		onLoad() {
			console.log('userinfo', userinfo)
		},
		methods: {
			...mapMutations('m_user', ['updateAddress', 'updateUserInfo', 'updateToken']),
			async logout(index) {
				if(index === 2) {
					const [err,succ] = await uni.showModal({
						title: '提示',
						content: '确认退出登录吗？'
					}).catch(err => err)
					if(succ && succ.cofirm) {
						this.updateAddress({})
						this.updateUserInfo({})
						this.updateToken('')
					}
				}
			}
		}
	}
</script>

<style lang="scss">
.my-userinfo {
	height: 100%;
	background-color: #f4f4f4;
	.user-box {
		height: 400rpx;
		background-color: #c00000;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		image {
			width: 90px;
			height: 90px;
			border-radius: 45px;
			border: 2px solid #fff;
			box-shadow: 0 1px 5px black;
		}
		text {
			font-size: 16px;
			color: #fff;
		}
	}
	.panel-list {
		position: relative;
		top: -20px;
		margin: 10px;
		.common-style {
			display: flex;
			border-radius: 8px;
			padding: 10px;
			background-color: #fff;
		}
		.child-common {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 14px;
		}
		.list1 {
			justify-content: space-between;
		}
		.list2 {
			flex-direction: column;
			margin: 10px 0;
			.list2-box {
				display: flex;
				justify-content: space-between;
				.list2-item {
					margin-top: 10px;
					image {
						width: 40px;
						height: 40px;
					}
				}
			}
		}
		.list3 {
			background-color: #fff;
			height: 50px;
			line-height: 50px;
			display: flex;
			justify-content: space-between;
			padding: 0 10px;
			font-size: 14px;
		}
	}
}
</style>